<template>
    <div class="containers-Sidebar side">
        <ul class="menu">
            <li @click="routerChange('/homeIndex','首页')" class="pointer border_bottom_eee" :class="{active: currentActiveMenu == 'homeIndex'}">
                <span class="menu-text">
                    <span class="addicon">
                    <Icon type="gear-b"></Icon>
                    </span>
                    个人中心
                </span>
            </li>

            <li>
                <span class="menu-text"><span class="addicon">
                    <Icon type="gear-b"></Icon>
                </span>灵感</span>
                <ul class="menu-sub">
                    <li :class="{active: currentActiveMenu == 'sszx'}" v-on:click="changeMenu('sszx', '实时资讯')">
                        <a href="#/realTimeNews" class="menu-sub-text wake">实时资讯</a>
                    </li>
                    <li :class="{active: currentActiveMenu == 'ssrd'}" v-on:click="changeMenu('ssrd', '实时热点')">
                        <a href="#/realTimeHotNews" class="menu-sub-text ">实时热点</a>
                    </li>

                    <li :class="{active: currentActiveMenu == 'rcfx'}" v-if="false" v-on:click="changeMenu('rcfx', '热词分析')">
                        <a href="#/hotWordAnalyze" class="menu-sub-text ">热词分析</a>
                    </li>

                    <li :class="{active: currentActiveMenu == 'bwsx'}" v-on:click="changeMenu('bwsx', '爆文赏析')">
                        <a href="#/hotAriticalAppreciate" class="menu-sub-text ">爆文赏析</a>
                    </li>

                    <li :class="{active: currentActiveMenu == 'hwsp'}" v-on:click="changeMenu('hwsp', '海外视频')">
                        <a href="#/foreignVideo" class="menu-sub-text ">海外视频</a>
                    </li>

                    <li :class="{active: currentActiveMenu == 'zmtwk'}" v-on:click="changeMenu('zmtwk', '自媒体文库')">
                        <a href="#/selfMediaLibrary" class="menu-sub-text ">自媒体文库</a>
                    </li>

                </ul>
                            
            </li>

            <li>
                <span class="menu-text"><span class="addicon">
                <Icon type="gear-b"></Icon>
                </span>私享</span>
                <ul class="menu-sub">
                    <li :class="{active: currentActiveMenu == 'wdgd'}" v-on:click="changeMenu('wdgd', '我的G点')">
                        <a href="#/myGpoint" class="menu-sub-text wake">我的G点</a>
                    </li>
                    <li :class="{active: currentActiveMenu == 'rwqy'}" v-on:click="changeMenu('rwqy', '人物/企业')">
                        <a href="#/personageCompany" class="menu-sub-text wake">人物/企业</a>
                    </li>
                    <li :class="{active: currentActiveMenu == 'sjzd'}" v-on:click="changeMenu('sjzd','数据定制')">
                        <a href="#/dataCustomization" class="menu-sub-text wake">数据定制</a>
                    </li>
                    <li :class="{active: currentActiveMenu == 'zzjk'}" v-on:click="changeMenu('zzjk','作者监控')">
                        <a href="#/authorMonitored" class="menu-sub-text wake">作者监控</a>
                    </li>
                </ul>
            </li>

            <li @click="routerChange('/goodContent','干货')" class="pointer border_bottom_eee" :class="{active: currentActiveMenu == 'goodContent'}">
                <span class="menu-text">
                    <span class="addicon">
                    <Icon type="gear-b"></Icon>
                    </span>
                    干货
                </span>
            </li>

            <li @click="routerChange('/favoriteFolder','收藏夹')" class="pointer border_bottom_eee" :class="{active: currentActiveMenu == 'favoriteFolder'}">
                <span class="menu-text">
                    <span class="addicon">
                    <Icon type="gear-b"></Icon>
                    </span>
                    收藏夹
                </span>
            </li>

            <li @click="routerChange('/questionResponse/home','易撰问答——将新媒体棘手的问题交给专业人士解答')" class="pointer" :class="{active: currentActiveMenu == 'questionResponse'}">
                <span class="menu-text">
                    <span class="addicon">
                    <Icon type="gear-b"></Icon>
                    </span>
                    问答
                </span>
            </li>
        </ul>

    </div>
</template>

<script>
  export default {
      data:function(){
        return {
            currentActiveMenu : "sy"
        }
      },
      computed:  {
          activeMenu:function(){
          }
      },
      methods:{
          // 路由切换
          routerChange: function (routerName,titleName) {
              // 修改路由路径
              this.$router.push({ path: routerName });
              // 修改导航标题
              this.$emit("active-menu",titleName);
              // 高亮选中的ITEM
              this.currentActiveMenu = routerName;
          },
          changeMenu:function(targetStr,titleName){
              this.currentActiveMenu = targetStr;
              // 暴露出选中的菜单
              this.$emit("active-menu",titleName);
          },
      }
  }
</script>

<style scoped lang="scss">
    .containers-Sidebar{
        width: 200px;
        margin-right: 20px;
        font-size: 12px;
        padding: 30px 0;
        background: #fff;

        .menu{
            margin: 0;
            padding: 0;
            .border_bottom_eee{
                border-bottom: 1px solid #e9eef4;
            }
            .pointer{
                cursor: pointer;
                &.active{
                    background: #32b3f4;
                    .menu-text{
                        color: #fff;
                    }
                }
            }

            li{

                .menu-text{

                    position: relative;
                    display: block;
                    height: 36px;
                    line-height: 36px;
                    padding-left: 60px;
                    font-size: 14px;
                    color: #808ea0;

                    .addicon{
                        position: absolute;
                        top: 0;
                        left: 28px;
                    }
                }

                .menu-sub{
                    border-bottom: 1px solid #e9eef4;
                    padding-bottom: 8px;

                    li{
                        cursor: pointer;
                        &.active{
                            a{
                                cursor: default;
                                color: #fff;
                                background: #32b3f4;

                                &:hover{
                                    background: #32b3f4;
                                }
                            }
                        }
                    }

                    a{
                        color: #222;

                        &.menu-sub-text{
                            display: block;
                            height: 44px;
                            line-height: 44px;
                            padding-left: 65px;
                            font-size: 12px;
                        }
                        &:hover{
                            text-decoration: none;
                            background: #f6f9fb;
                        }
                    }

                }

            }
        }
    }
</style>
